<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS3线性渐变</title>
	<style type="text/css" media="screen">
		div {
			width: 200px;
			height: 200px;
			line-height: 200px;
			text-align: center;
			border: 0px solid #2b6a9a;
			margin: 20px;
			float: left;
		}
		.deg0 {
			background-image: -webkit-linear-gradient(0deg, red, green);
			background-image: linear-gradient(0deg, red, green);
		}
		.deg45 {
			background-image: -webkit-linear-gradient(45deg, red, green);
			background-image: linear-gradient(45deg, red, green);
		}
		.deg90 {
			background-image: -webkit-linear-gradient(90deg, red, green);
			background-image: linear-gradient(90deg, red, green);
		}
		.deg135 {
			background-image: -webkit-linear-gradient(135deg, red, green);
			background-image: linear-gradient(135deg, red, green);
		}
		.deg180 {
			background-image: -webkit-linear-gradient(180deg, red, green);
			background-image: linear-gradient(180deg, red, green);
		}
		.deg225 {
			background-image: -webkit-linear-gradient(225deg, red, green);
			background-image: linear-gradient(225deg, red, green);
		}
		.deg270 {
			background-image: -webkit-linear-gradient(270deg, red, green);
			background-image: linear-gradient(270deg, red, green);
		}
		.deg315 {
			background-image: -webkit-linear-gradient(315deg, red, green);
			background-image: linear-gradient(315deg, red, green);
		}
		.deg360 {
			background-image: -webkit-linear-gradient(360deg, red, green);
			background-image: linear-gradient(360deg, red, green);
		}
		/*negative*/
		.deg45-negative {
			background-image: -webkit-linear-gradient(-45deg, red, green);
			background-image: linear-gradient(-45deg, red, green);
		}
		.deg90-negative {
			background-image: -webkit-linear-gradient(-90deg, red, green);
			background-image: linear-gradient(-90deg, red, green);
		}
		.deg135-negative {
			background-image: -webkit-linear-gradient(-135deg, red, green);
			background-image: linear-gradient(-135deg, red, green);
		}
		.deg180-negative {
			background-image: -webkit-linear-gradient(-180deg, red, green);
			background-image: linear-gradient(-180deg, red, green);
		}
		.deg225-negative {
			background-image: -webkit-linear-gradient(-225deg, red, green);
			background-image: linear-gradient(-225deg, red, green);
		}
		.deg270-negative {
			background-image: -webkit-linear-gradient(-270deg, red, green);
			background-image: linear-gradient(-270deg, red, green);
		}
		.deg315-negative {
			background-image: -webkit-linear-gradient(-315deg, red, green);
			background-image: linear-gradient(-315deg, red, green);
		}
		.deg360-negative {
			background-image: -webkit-linear-gradient(-360deg, red, green);
			background-image: linear-gradient(-360deg, red, green);
		}
	</style>
</head>
<body>
	<div class="deg0">0deg</div>
	<div class="deg45">45deg</div>
	<div class="deg90">90deg</div>
	<div class="deg135">135deg</div>
	<div class="deg180">180deg</div>
	<div class="deg225">225deg</div>
	<div class="deg270">270deg</div>
	<div class="deg315">315deg</div>
	<div class="deg360">360deg</div>
	<div class="deg0">0deg</div>
	<div class="deg45-negative">-45deg</div>
	<div class="deg90-negative">-90deg</div>
	<div class="deg135-negative">-135deg</div>
	<div class="deg180-negative">-180deg</div>
	<div class="deg225-negative">-225deg</div>
	<div class="deg270-negative">-270deg</div>
	<div class="deg315-negative">-315deg</div>
	<div class="deg360-negative">-360deg</div>
</body>
</html>